<script setup>
import {computed, toRef, toRefs} from "vue";
import {useStore, mapState} from "vuex";

const store = useStore()

/*
  使用计算属性自己手动映射state中的数据
  let count = computed(() => store.state.count)
 */

/*
  使用mapState()映射state中的数据
  const store = useStore()
  const {count} = mapState(["count"])
  const cCount = computed(count.bind({$store: store}))
*/

/*
  使用toRefs
  const {count} = toRefs(store.state)
*/

// 使用toRef
const count = toRef(store.state, "count")
const add = () => {
  store.dispatch("changeCountAction", count.value)
}
</script>

<template>
  <div class="layui-panel home">
    <h1>home组件</h1>
    <h1>{{ cCount }}</h1>
    <h3>Store中的state的count的值：{{ count }}</h3>
    <button type="button" class="layui-btn" @click="add">从home组件中修改store中的count</button>
  </div>
</template>

<style scoped lang="less"></style>